<template>
  <div id="app" ref="app" class="color-gray">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import {Loading, TransferDom,XHeader} from 'vux'
  import {mapState} from 'vuex'
  import OverPull from '@/utils/overPull'
  import tabbar from '@/components/tabbar';

  export default {
    directives: {
      TransferDom
    },
    components: {
      Loading,
      tabbar
    },
    computed: {
      ...mapState({
        isLoading: state => state.vux.isLoading
      })
    },
    created() {
      OverPull.init();
    }
  }
</script>
<style lang="less">
  #app {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>
<style>
  /* this rule will be remove */
  * {
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
  }
</style>

